<template>
    <div class="newsinfo-container">
        <h3>{{newsinfo.title}}</h3>
        <p>
            <span>发布时间：{{newsinfo.add_time | dateFormat}}</span>
            <span>点击：{{newsinfo.click}}次</span>
        </p>
        <hr>
        <!-- 新闻内容 -->
        <div class="content" v-html="newsinfo.content"></div>

        <!-- 评论子组件 -->
        <!-- 父组件向子组件传值，通过属性绑定的方式 -->
        <comment :newsid="id"></comment>
    </div>
</template>

<script>
import comment from '../public/Comment.vue'
export default{
    data(){
        return{
            newsinfo:{}
        }
    },
    created(){
        this.getNewsInfo();
    },
    methods:{
        async getNewsInfo(){
          const {data} = await this.$http.get('/api/getnew/' + this.id);
          if(data.status === 0)return (this.newsinfo = data.message[0]);
        }
    },
    props:['id'],
    components:{
        comment

    }
}
</script>

<style scoped>
.newsinfo-container h3{
    font-size: 16px;
    text-align: center;
    margin: 15px 0px;
}
.newsinfo-container p{
    display: flex;
    justify-content: space-between;
    padding: 0px 5px;
}
.newsinfo-container .content{
    padding: 0px 5px;
}
</style>
